<template>
	<view class="pages-activity">
		
		<!-- <fixed>
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				:width="100/tabList.length + '%'" height="100rpx"></tab>
			<view class="b-1px-b"></view>
		</fixed> -->
		
		<view class="container">
			
			<!-- <view @tap.stop="goDetail(index)"
				class="list-item flex-y-end mb-md ml-md mr-md pd-lg fill-base radius-16" :style="'background-image: url(' + item.image + ');'"
				v-for="(item, index) in list" :key="index">
				
				<view class="flex-1 ml-sm">
					<view class="flex-warp">
						<image mode="aspectFill" class="cover radius mr-md" style="width: 40rpx; height: 40rpx;" :src="item.image"></image>
						<view class="f-title c-title max-400 ellipsis" style="margin: 5rpx 0;">{{ item.name }}</view>
					</view>
					<view class="f-caption c-caption">{{item.address}}</view>
				</view>
			</view> -->
			
			<block class="list-view">
				
				<view @tap.stop="goDetail(index)"
					class="list-item flex-y-end flex-x-end mb-md ml-md mr-md mb-md pd-lg fill-base radius-16" 
					:style="'background-image: url(' + item.image + ');'"
					v-for="(item, index) in list" :key="index">
					
					<view class="flex-1 mr-sm" style="width: 100%;">
						<view class="f-title c-title max-400 ellipsis" style="margin: 5rpx 0;width: 100%;color:#FF008B">{{ item.name }}</view>
						<view class="f-caption c-caption ellipsis" style="margin: 5rpx 0;width: 100%;">{{ item.address }}</view>
						<view class="flex-warp flex-center fill-base radius log-tag" style="float: right;" @tap.stop="toNavigation(item)">
							<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
							<!-- <view class="f-desc c-title">{{item.distance}}123km</view> -->
							<view class="f-desc c-title pl-sm pr-sm">{{item.distance}}km</view>
						</view>
					</view>
				</view>
				
				<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
				
			</block>
			
		</view>
		
		

		<load-more :noMore="current_page>=last_page&&list.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.length<=0"></abnor>

		<view class="space-footer"></view>
			<view @click="fabClick" class="top-bg">
				<i class="iconfont add ml-sm" style="font-size: 108rpx;" :style="{color: primaryColor}"></i>
			</view>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="2"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				options: {},
				loading: true,
			}
		},
		computed: mapState({
			pageActive: state => state.activisylist.pageActive,
			activeIndex: state => state.activisylist.activeIndex,
			tabList: state => state.activisylist.tabList,
			param: state => state.activisylist.param,
			list: state => state.activisylist.list,
			current_page: state => state.activisylist.current_page,
			last_page: state => state.activisylist.last_page,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad(options) {
			let {
				tab = 0
			} = options
			this.updateActivityItem({
				key: 'activeIndex',
				val: tab
			})
			await this.initIndex()
			this.updateActivityItem({
				key: 'pageActive',
				val: true
			})
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page >= this.last_page || this.loading) return;
			this.loading = true;
			this.getList(this.param.p + 1);
		},
		methods: {
			...mapActions(['getConfigInfo', 'getActivitylist']),
			...mapMutations(['updateActivityItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.getList(1)
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getList(page = 0) {
				if (page) {
					let param = this.$util.deepCopy(this.param)
					param.p = page
					param.type = 1
					this.updateActivityItem({
						key: 'param',
						val: param
					})
				}
				let {
					list: oldList,
					param,
					tabList,
					activeIndex
				} = this
				await this.getActivitylist(param)
				// debugger
				this.loading = false
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.updateActivityItem({
					key: 'activeIndex',
					val: index
				})
				this.param.type = index == 0 ? 2 : 1
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.$util.showLoading()
				this.getList(1)
			},
			// 详情
			goDetail(index) {
				let {
					id
				} = this.list[index]
				let url = `/activity/pages/activity-info?activit_id=${id}`
				this.$util.goUrl({
					url
				})
			},
			fabClick(id){
				this.$util.goUrl({
					url: '/activity/pages/activity'
				})
			},
			//导航--传终点的坐标即可
			toNavigation(item) {
				//根据终点地址调起地图导航
				uni.openLocation({
					longitude: parseFloat(item.lng),// 经度，范围为-180~180，负数表示西经
					latitude: parseFloat(item.lat),// 纬度，范围为-90~90，负数表示南纬
					scale: 28, // 缩放比例
					name:item.name,//终点名称
					address:item.address,//终点详细地址
					success: function (res) {
						console.log('success:',res);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.pages-activity {
		.clearfloat:after {
		  /*伪元素是行内元素 清除浮动*/
		  content: '';
		  display: block;
		  height: 0;
		  clear: both;
		  visibility: hidden;
		}
		
		.top-bg{
			position: fixed;
			right: 30px;
			bottom: 80px;
			width: 35px;
			height: 35px;
			/* 知识点
				line-height是行高，针对的对象是文字，height针对的是容器，
				也就是高度，当height和line-height值相同时会居中，
				当line-height值小于height时文字向上移动，反之向下移动。
				 */
			line-height: 45px; /* 文字垂直居中 */
			text-align: center; /* 水平居中 */
			// background-color: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			color: #fff;
			font-size: 20px;
		}
		
		.container {
			// column-count: 2;//想要排成的列数
			// column-gap: 0;
			// -moz-column-gap:20px;
		 //    -webkit-column-gap:10px;
			margin-top: 25rpx;
			.list-item {
				// box-sizing: border-box;
				// width: 100%;
				// height: 400rpx;
				// position: relative;
				// background-position: center;
				// background-size:cover;
				// background-repeat: no-repeat;
				
				float: left;
				box-sizing: border-box;
				width: 45%;
				height: 400rpx;
				padding: 10px 6px;
				background-position: center;
				background-size:cover;
				background-repeat: no-repeat;
				.member-tag {
					width: 168rpx;
					height: 46rpx;
					background: #0e0f0f;
				
					.iconfont {
						font-size: 28rpx;
					}
				}
				
				.cover {
					width: 180rpx;
					height: 180rpx;
				}
				
				.text {
					width: 75rpx;
					height: 75rpx;
				}
			}
		}
		
		.list-view {
			margin-bottom: 160rpx;
			padding-bottom: 160rpx;
		}
	}
	
</style>
